<template>
	<view>
		<!-- 开头部分 -->
		<uni-nav-bar dark background-color="#2477f4" title="选择车辆" :border="false" left-icon="left"
			@clickLeft="back"></uni-nav-bar>
		<view class="bc"></view>
		<view class="list">
			<radio-group name="" @change="radioChange">
			<view class="list-item">
				<view class="img">
					<image class="img2" src="/static/car.jpg"></image>
				</view>
				<view class="vehicle">
					<view>车型：奔驰-GR</view>
					<view>车牌：豫M35486</view>
				</view>
				<view class="radio">
					<radio value="" />
				</view>
			</view>
			<view class="list-item">
				<view class="img">
					<image class="img2" src="/static/car.jpg"></image>
				</view>
				<view class="vehicle">
					<view>车型：奔驰-GR</view>
					<view>车牌：豫M35486</view>
				</view>
				<view class="radio">
					<radio value="" />
				</view>
			</view>
			</radio-group>
		</view>
		<!-- 底部部分 -->
		<view class="footer">
			<navigator url="/packageWash/pages/confirmOrder/confirmOrder" class="right">
				<button class="myButton">＋添加车辆</button>
			</navigator>
		</view>
		<view class="footer2"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
		}
	}
</script>

<style>
	.bc {
		width: 750rpx;
		height: 220rpx;
		position: relative;
		border-top: 2rpx solid #2477f4;
		background-color: #2477f4;
	}
	
	.list{
		top: 138rpx;
		width: 710rpx;
		position: absolute;
	}

	.list-item {
		width: 710rpx;
		height: 200rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #FFF;
		position: relative;
		padding: 20rpx 0 0 0 ;
	}

	.img2 {
		width: 120rpx;
		height: 120rpx;
		margin: 30rpx;
		background-color: #287BF6;
		border-radius: 60rpx;
	}
	
	.vehicle{
		left: 180rpx;
		top: 30rpx;
		position: absolute;
	}
	
	.radio{
		right: 30rpx;
		top: 90rpx;
		position: absolute;
	}

	.vehicle>view:nth-child(1) {
		margin-top: 30rpx;
		font-weight: bold;
		font-size: 40rpx;
	}

	.vehicle>view:nth-child(2) {
		margin-top: 30rpx;
		width: 300rpx;
	}

	.select>input[type="radio"] {
		position: relative;
	}

	.selected {
		width: 50rpx;
		height: 50rpx;
		margin-left: 150rpx;
		margin-top: 60rpx;
	}

	.notSelected {
		width: 50rpx;
		height: 50rpx;
		margin-left: 150rpx;
		margin-top: 60rpx;
	}
	
	/* 修改单选按钮选中后的样式 */
	/* radio {
	  // 设置单选按钮的内边距
	  padding: 5px;
	  // 设置单选按钮的外边距
	  margin: 5px;
	  // 选中状态下的样式
	  &:checked {
	    // 修改选中后的背景色
	    background-color: #ff6600; 
	    // 修改选中后的边框颜色
	    border-color: #ff6600;
	    // 修改选中后的颜色
	    color: #fff;
	  }
	}
	 */
	/* 底部样式开始 */
	.footer{
		height: 120rpx;
		width: 750rpx;
		position: fixed;
		display: flex;
		bottom:0;
		background-color: white;	
	}
	
	.myButton{
		height: 66rpx;
		width: 650rpx;
		color: #FFF;
		margin-top: 27rpx;
		margin-left: 50rpx;
		line-height: 66rpx;
		border-radius: 30rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url(/static/btn.png) !important;
	}
</style>
